<%--
  Created by IntelliJ IDEA.
  User: ykj
  Date: 16/4/4
  Time: 下午2:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script>
    $(document).ready(function(){
        $('.pageLink').click(function(){
            var page = $(this).attr('page');
            var type = $('#typeId').find('a[class=current]').attr('data');
            var rateSpan = $('#rateSpan').find('a[class=current]').attr('data');
            var timeSpan = $('#timeSpan').find('a[class=current]').attr('data');
            $('#product-paginate').load('product/filterProduct',
                    {page:page,type:type,rateSpan:rateSpan,timeSpan:timeSpan});
        });
    });
</script>
<div id="product-table-body" class="ark-table-body">
    <!-- output data collection -->
    <div class="container-fluid">
        <c:forEach var="product" items="${products.list}">
            <div class="product-item">
                <div class="row item-title">${product.name}</div>
                <div class="row item-content">
                    <div class="col-xs-2">
                        <div class="item-content-value-block">
                            <div>
                                <span class="item-value-highlight">${product.rateReturn}</span>
                                <span class="unit">%</span>
                            </div>
                            <div class="caption">年化收益率</div>
                        </div>
                        <div class="column-split">
                            <div class="column-split-line"></div>
                        </div>
                    </div>

                    <div class="col-xs-2">
                        <div class="item-content-value-block">
                            <div>
                                <span class="item-value">${product.needTime}</span>
                                <span class="unit">天</span>
                            </div>
                            <div class="caption">投资期限</div>
                        </div>
                        <div class="column-split">
                            <div class="column-split-line"></div>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="item-content-value-block">
                            <div>
                                <span class="item-value">${product.alreadyMoney}</span>
                                <span class="unit">元</span>
                            </div>
                            <div class="caption">已募资金</div>
                        </div>
                        <div class="column-split">
                            <div class="column-split-line"></div>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="item-content-value-block">
                            <div>
                                <span class="item-value">${product.totalMoney}</span>
                                <span class="unit">元</span>
                            </div>
                            <div class="caption">募资总额</div>
                        </div>
                        <div class="column-split">
                            <div class="column-split-line"></div>
                        </div>
                    </div>
                    <div class="col-xs-2"><a class="btn btn-danger"
                                             href="product/detail?id=${product.id}">立即购买</a>
                    </div>
                </div>
            </div>
            <div class="row-split">
                <div class="line ark-margin-left-40 ark-margin-right-40"></div>
            </div>
        </c:forEach>
    </div>
    <!-- end of data output -->
</div>
<div class="ark-table-footer">
    <div class="text-center">
        <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <c:forEach begin="1" end="${products.totalPage}" varStatus="status">
                <li>
                    <a class="pageLink" href="javascript:void(0);" page="${status.index}">${status.index}</a>
                </li>
            </c:forEach>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>